@mixin clipNum {
  /* by zhangxinxu(.com)，可免费商用，保留此注释即可 */
  .num {
    display: inline-block;
    line-height: 1;
    -webkit-text-fill-color: transparent;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-color: currentColor;
    }
    &:empty::after {
      content: "0";
    }
    &.num0::before {
      clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        60% 100%,
        60% 20%,
        40% 20%,
        40% 80%,
        calc(60% - 0.01px) 80%,
        calc(60% - 0.01px) 100%,
        0% 100%
      );
    }
    &.num1::before {
      text-indent: -0.25em;
    }
    &.num2::before,
    &.num5::before {
      clip-path: polygon(
        0 0,
        100% 0,
        100% 60%,
        50% 60%,
        50% 80%,
        100% 80%,
        100% 100%,
        0 100%,
        0% 40%,
        50% 40%,
        50% 20%,
        0% 20%
      );
    }
    &.num3::before {
      clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        0% 100%,
        0% 80%,
        50% 80%,
        50% 60%,
        0% 60%,
        0% 40%,
        50% 40%,
        50% 20%,
        0% 20%
      );
    }
    &.num4::before {
      clip-path: polygon(
        0 0,
        40% 0,
        40% 50%,
        calc(100% - 40%) 50%,
        calc(100% - 40%) 0%,
        100% 0%,
        100% 100%,
        calc(100% - 40%) 100%,
        calc(100% - 40%) 70%,
        0% 70%
      );
    }
    &.num5::before {
      transform: scaleX(-1);
    }
    &.num6::before,
    &.num9::before {
      clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 20%,
        calc(40% - 0.01px) 20%,
        calc(40% - 0.01px) 80%,
        calc(100% - 40%) 80%,
        calc(100% - 40%) 60%,
        40% 60%,
        40% 40%,
        100% 40%,
        100% 100%,
        0% 100%
      );
    }
    &.num7::before {
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 20%, 0% 20%);
    }
    &.num8::before {
      clip-path: polygon(
        0% 0%,
        calc(40% - 0.01px) 0%,
        calc(40% - 0.01px) 40%,
        60% 40%,
        60% 20%,
        40% 20%,
        40% 0%,
        100% 0%,
        100% 100%,
        40% 100%,
        40% 80%,
        60% 80%,
        60% 60%,
        calc(40% - 0.01px) 60%,
        calc(40% - 0.01px) 100%,
        0% 100%
      );
    }
    &.num9::before {
      transform: scale(-1);
    }
  }
  @supports not (inset: 0) {
    .num::before {
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }
}
